<template>
  <div class="min-h-screen bg-gray-50">

    <div class="max-w-7xl mx-auto px-4 py-8">
      <div class="grid grid-cols-3 gap-8">
        <div class="col-span-2">
          <div class="bg-white p-6 rounded-lg shadow-md mb-8">
            <div class="flex items-center justify-between mb-6">
              <h2 class="text-xl font-bold">練習</h2>
              <div>

              </div>
            </div>
          </div>
          <div class="grid grid-cols-4 gap-4" style="display: grid">

            <div v-for="(group, groupIndex) in data_list.slice(0, 30).chunk(10)" :key="groupIndex"
              class="bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-shadow"
              style="display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem;">
              <div v-for="(item, index) in group" :key="item.id" class="p-3"
                style="display: flex; align-items: center; width: 100%; padding: 0.5rem;">
                <el-radio-group v-model="radio_chain">
                  <el-radio :label="item.id">{{ item.name }}</el-radio>
                </el-radio-group>

              </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-shadow action_view">
              <div class="text-center p-4">
                <button class="px-4 py-2 bg-custom text-white rounded-lg text-sm" @click="select_ok">応用</button>
              </div>
              <div class="text-center p-4">
                <el-button icon="el-icon-refresh" @click="refresh">交換</el-button>
              </div>
            </div>

          </div>
        </div>
        <div class="space-y-6">

<div class="bg-white p-6 rounded-lg shadow-md h-fit">
  <h3 class="text-lg font-medium mb-4">学習データ</h3>
  <div class="space-y-6">
    <div class="p-4 bg-gray-50 rounded-lg">
      <h4 class="font-medium text-sm mb-3">今週の勉強の概要</h4>
      <div class="space-y-2">
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">完成したの問題数</span>
          <span class="font-medium">{{ weekTotal?.completed_tasks }}</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の正解率</span>
          <span class="font-medium">{{ weekTotal?.correctness_rate }}%</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の達成率</span>
          <span class="font-medium">{{ weekTotal?.completion_rate }}%</span>
        </div>
        <!-- <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の勉強時間</span>
          <span class="font-medium">{{ roundMinutes(weekTotal?.total_study_time) }}{{
            isMinuteOrHour(roundMinutes(weekTotal?.total_study_time)) }}</span>
        </div> -->
      </div>
    </div>


  </div>
</div>
</div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios.js"

export default {
  name: 'App',
  data() {
    return {
      category_list:[],
      data_list: [],
      category_name:"",
      select: null,
      radio_chain: null,
      weekTotal: {}
    };
  },
  async created() {
    Array.prototype.chunk = function (chunkSize) {
      const chunks = [];
      for (let i = 0; i < this.length; i += chunkSize) {
        chunks.push(this.slice(i, i + chunkSize));
      }
      return chunks;
    };
    const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    await this.get_questionType()
    await this.getweekTotal()
    loading.close();
  },
  methods: {
    async getweekTotal() {
      try {
        let data = await get("/get_week_success_task")
        if (data.data.code == "success") {
          this.weekTotal = data.data.data
        }
      } catch (error) {
        this.$message.error("接続タイムアウトです")
      }
    },
    roundMinutes(minutes) {
      return Math.round(minutes);
    },
    isMinuteOrHour(value) {
      // 处理负数和非整数情况
      if (value < 0 || !Number.isInteger(value)) {
        return '無効な入力は、非負の整数を入力してください';
      }

      // 处理分钟
      if (value >= 0 && value < 60) {
        return '分です';
      }

      // 处理小时，包括超过23小时但小于48小时的情况
      if (value >= 0 && value <= 23) {
        return '時間';
      } else if (value > 23 && value <= 47) {
        // 将超过24小时但小于48小时的值转换为0-23的范围
        value = value - 24;
        return '時間';
      } else if (value > 47 && value <= 71) {
        value = value - 48;
        return '時間';
      } else {
        return '時間や分の値は有効ではありません';
      }
    },
    isMinuteOrHour(value) {
      // 处理负数和非整数情况
      if (value < 0 || !Number.isInteger(value)) {
        return '無効な入力です,非負の整数を入力してください';
      }

      // 处理分钟
      if (value >= 0 && value < 60) {
        return '分';
      }

      // 处理小时，包括超过23小时但小于48小时的情况
      if (value >= 0 && value <= 23) {
        return '時間';
      } else if (value > 23 && value <= 47) {
        // 将超过24小时但小于48小时的值转换为0-23的范围
        value = value - 24;
        return '時間';
      } else if (value > 47 && value <= 71) {
        value = value - 48;
        return '時間';
      } else {
        return '時間や分の値は有効ではありません';
      }
    },
    select_ok() {
      if (!this.radio_chain) {
        this.$message.error("問題の種類を選択してください。")
        return
      }
      this.$router.push({ path: '/exercise', query: { id: this.radio_chain } })

    },
    refresh() {
      this.get_questionType()
    },
    async get_questionType() {

      //请求/get_random_categories接口，获取题目类型列表，并赋值给data_list
      //返回的数据格式为:[{"id":1,"name":"选择题"},{"id":2,"name":"填空题"},{"id":3,"name":"解答题"}]
      await get("/get_random_categories").then(async res => {

        this.data_list = res.data.data;

      })
    }

  },
  mounted() {
    // 在这里执行你的代码
  }
};
</script>

<style scoped></style>
